<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第一遍看着写 -->
    <!-- <form id="form">
        <input id='ipt' type="text">
        <button id="btn">输入学生id 查询他的详细信息</button> -->
<!-- onsubmit 事件会在表单中的确认按钮被点击时发⽣。当该事件触发的函数中返回false时，表单就不会被提交
 -->
    <!-- </form> -->
    <!-- <script>
        const oBtn = document.getElementById('btn');
        const oIpt = document.getElementById('ipt');
        const oForm = document.getElementById('form'); 
        oForm.onsubmit =function(){
          
            const userId = oIpt.value
            const xhr = new XMLHttpRequest()
            xhr.open('get',`/user?userId=${userId}&_=${Date.now()}`,true)
            xhr.send()
            xhr.onreadystatechange =function(){
                if(xhr.readystate===4){
                    console.log(xhr.responseText)//获取响应体
                }
            }
                return false;
        }

    </script> -->
<!-- 第二遍 自己写 -->
    <form  id='form' action="">
        <input id='ipt' type="text">
        <button id="btn">提交</button>
    </form>
    <script>
        const form =document.querySelector('#form')
        const ipt =document.querySelector('#ipt')
        const btn =document.querySelector('#btn')
        form.onsubmit =function(){//表单提交触发
            const xhr =new XMLHttpRequest()
            const userId =ipt.value//获取用户输入内容
            xhr.open('get',`/user?userId=${userId}&_=${Date.now()}`,true)//拼接路径和查询字符串，用户输入什么，请求的url中的查询字符串也变成什么
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4&&xhr.status>=200&&xhr.status<=299){
                    console.log(xhr.responseText)//获取响应体
                }
            }
            return false//表单不会被提交,且可以阻止浏览器默认行为（提交就刷新页面）
        }



    </script>


</body>
</html>